import { useRequest } from "@/hooks/use-request";
import { useUserStore } from "@/stores/global/user";
import { antdUtils } from "@/utils/antd";
import { t } from "@/utils/i18n";
import { DatePicker, Form, Input, Modal, Select } from "antd";
import dayjs from "dayjs";
import { memo, useEffect } from "react";
import { useImmer } from "use-immer";
import myService from "./service";

export const EditDialog = memo((props: any) => {
  const { setShowEditDialog, showEditDialog, onSave } = props;
  const [form] = Form.useForm();
  const [saveLoading, setSaveLoading] = useImmer(false);
  const { runAsync: savePlan } = useRequest(myService.savePlan, {
    manual: true,
  });

  useEffect(() => {
    if (showEditDialog.isShow) {
      setInitValue();
    } else {
      form.resetFields();
    }
  }, [showEditDialog.isShow]);

  async function setInitValue() {
    if (showEditDialog.data) {
      const a: any = { ...showEditDialog.data };
      a.planOverTime = dayjs(showEditDialog.data.planOverTime);
      form.setFieldsValue(a);
    }
  }

  const save = async (value: any) => {
    const [error, data] = await savePlan({
      ...showEditDialog.data,
      state: value.state,
      planOverTime: dayjs(value.planOverTime).format("YYYY-MM-DD"),
      describe: value.describe,
    });
    if (error) {
      antdUtils.message?.error(error);
    } else {
      setShowEditDialog({
        isShow: false,
        data: null,
      });
      onSave(data);
    }
  };

  return (
    <Modal
      open={showEditDialog.isShow}
      destroyOnClose
      title={`${t("wXpnewYo") /** 编辑 */}`}
      onOk={() => {
        form.submit();
      }}
      okText={t("confirm") /**确认 */}
      confirmLoading={saveLoading}
      width={640}
      onCancel={() => {
        // onCancel();
        setShowEditDialog({
          isShow: false,
          data: null,
        });
      }}
      cancelText={t("cancel") /**取消 */}
      afterClose={() => {
        form.resetFields();
        setSaveLoading(false);
      }}
    >
      <Form
        form={form}
        onFinish={save}
        labelCol={{ flex: "0 0 100px" }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item name="name" label="计划名" rules={[{ required: true }]}>
          <Input disabled />
        </Form.Item>
        <Form.Item name="state" label="状态">
          <Select
            style={{ width: 100 }}
            onChange={() => {
              //   setPagination((old) => {
              //     old.current = 1;
              //     old.pageSize = 8;
              //     form.submit();
              //   });
            }}
            options={[
              { value: "0", label: "暂停" },
              { value: "1", label: "执行中" },
              { value: "2", label: "已完成" },
            ]}
          />
        </Form.Item>
        <Form.Item name="planOverTime" label="预计结束时间">
          <DatePicker
            format="YYYY-MM-DD"
            onChange={() => {
              //   setPagination((old) => {
              //     old.current = 1;
              //     old.pageSize = 8;
              //     form.submit();
              //   });
            }}
          />
        </Form.Item>
        <Form.Item name="describe" label="描述">
          <Input.TextArea autoSize={{ minRows: 2, maxRows: 10 }} />
        </Form.Item>
      </Form>
    </Modal>
  );
});

export const NewDialog = memo((props: any) => {
  const { setShowNewDialog, showNewDialog, onSave, projectid } = props;
  const { currentUser } = useUserStore();
  const [saveLoading, setSaveLoading] = useImmer(false);
  const [form] = Form.useForm();

  const { runAsync: newPlan } = useRequest(myService.newPlan, { manual: true });

  const save = async (value: any) => {
    const [error, data] = await newPlan({
      describe: value.describe ? value.describe : "",
      planOverTime: dayjs(value.planOverTime).format("YYYY-MM-DD"),
      startTime: dayjs(value.startTime).format("YYYY-MM-DD"),
      state: "0",
      userid: currentUser?.id,
      projectid: projectid,
      name: value.name,
      totalTime: "",
      executeTimeFirst: "",
      overTime: "",
    });
    if (error) {
      antdUtils.message?.error(error);
    } else {
      antdUtils.message?.success("创建成功");
      setShowNewDialog(false);
      onSave(data);
    }
  };

  return (
    <Modal
      open={showNewDialog}
      destroyOnClose
      title={`${t("VjwnJLPY") /** 新建 */}`}
      onOk={() => {
        form.submit();
      }}
      okText={t("confirm") /**确认 */}
      confirmLoading={saveLoading}
      width={640}
      onCancel={() => {
        // onCancel();
        setShowNewDialog(false);
      }}
      cancelText={t("cancel") /**取消 */}
      afterClose={() => {
        form.resetFields();
        setSaveLoading(false);
      }}
    >
      <Form
        form={form}
        onFinish={save}
        labelCol={{ flex: "0 0 100px" }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item name="name" label="计划名" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item
          name="startTime"
          label="计划开始时间"
          rules={[{ required: true }]}
        >
          <DatePicker format="YYYY-MM-DD" />
        </Form.Item>
        <Form.Item
          name="planOverTime"
          label="预计完成时间"
          rules={[{ required: true }]}
        >
          <DatePicker format="YYYY-MM-DD" />
        </Form.Item>
        <Form.Item name="describe" label="描述">
          <Input.TextArea autoSize={{ minRows: 2, maxRows: 10 }} />
        </Form.Item>
      </Form>
    </Modal>
  );
});
